<template>
    <div>
        <div>
            <div class="box">
                <div class="search">
                    <div class="search-top">
                        <el-icon>
                            <Search />
                        </el-icon>筛选搜索
                    </div>
                    <div>
                        <el-button @click="resetFn">重置</el-button>
                        <el-button type="primary" @click="searchFn">查询搜索</el-button>
                    </div>
                </div>
                <div>
                    <div class="input">
                        <el-form-item label="广告名称" label-width="150px">
                            <el-input placeholder="广告名称" v-model="state.parameters.name" />
                        </el-form-item>
                        <el-form-item label="广告位置" label-width="150px">
                            <el-select placeholder="全部" v-model="state.parameters.type">
                                <el-option label="PC首页轮播" :value="0" />
                                <el-option label="APP首页轮播" :value="1" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="input">
                        <el-form-item label="到期时间" label-width="150px">
                            <el-col :span="22">
                                <el-date-picker type="date" v-model="state.parameters.endTime" placeholder="请选择时间"
                                    style="width: 100%" />
                            </el-col>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <div class="record">
                <div class="record-top">
                    <span>
                        <el-icon>
                            <Tickets />
                        </el-icon>
                    </span>
                    <span>数据列表</span>
                </div>
                <div>
                    <el-button @click="router.push('/sms/addAdvertise')">添加广告</el-button>
                </div>
            </div>
        </div>
        <el-table @selection-change="options" ref="multipleTableRef" border :data="state.list">
            <el-table-column type="selection" width="90" />
            <el-table-column label="编号" property="id" width="100" />
            <el-table-column property="name" label="广告名称" width="100" />
            <el-table-column label="广告位置" width="90">
                <template #default="scope">
                    {{ scope.row.type == 0 ? "PC首页轮播" : "APP首页轮播" }}
                </template>
            </el-table-column>
            <el-table-column label="广告图片" width="250">
                <template #default="scope">
                    <img :src="scope.row.pic" height="100" alt="">
                </template>
            </el-table-column>
            <el-table-column label="时间" width="250">
                <template #default="scope">
                    <p>开始时间：{{ fomatDate(scope.row.startTime) }}</p>
                    <p>开始时间：{{ fomatDate(scope.row.endTime) }}</p>
                </template>
            </el-table-column>
            <el-table-column label="上线/下线" width="100">
                <template #default="scope">
                    <el-switch @click="changeStatus(scope.row)" v-model="scope.row.status" :active-value="1"
                        :inactive-valu="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column property="clickCount" label="点击次数" width="90" />
            <el-table-column property="orderCount" label="生成订单" width="90" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="(router.push(`/sms/addAdvertise?id=${scope.row.id}`))">编辑
                    </el-button>
                    <el-button link type="primary" @click="delFn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <div class="footer-srue">
                <el-form-item>
                    <el-select placeholder="批量操作" v-model="state.del">
                        <el-option label="删除" :value="2" />
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="sureDelFn">确定</el-button>
            </div>
            <ElConfigProvider :locale="zhCn">
                <div class="demo-pagination-block">
                    <el-pagination v-model:currentPage="state.parameters.pageNum"
                        v-model:page-size="state.parameters.pageSize" :page-sizes="[5, 10, 15]" :small="small"
                        :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
                        :total="state.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </ElConfigProvider>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { Search, Tickets } from "@element-plus/icons-vue";
import { user } from "@/api"
import { reactive, ref } from "vue";
import { fomatDate } from "@/utils"
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const state = reactive<{ parameters: homeAdvertiseList, list: homeAdvertiseModel[], total: number, ids: delRecommend, del: number | string }>({
    parameters: {
        endTime: "",
        name: "",
        pageNum: 1,
        pageSize: 5,
        type: ""
    },
    list: [],
    total: 0,
    ids: {
        ids: []
    },
    del: ""
})

// 提取list函数
const gethomeAdvertiseList = () => {
    user.homeAdvertiseList(state.parameters).then(res => {
        if (res.code == 200) {
            state.list = res.data.list
            state.total = res.data.total
        }
    })
}
gethomeAdvertiseList()


const options = (val: IUpdateUserStatusParams[]) => {
    state.ids.ids = []

    val.forEach(item => {
        state.ids.ids.push(item.id)
    })
    console.log(state.ids);
}
const handleSizeChange = () => {
    gethomeAdvertiseList()
}
const handleCurrentChange = () => {
    gethomeAdvertiseList()
}
// 搜索
const searchFn = () => {
    gethomeAdvertiseList()
}
// 重置
const resetFn = () => {
    state.parameters.endTime = ""
    state.parameters.name = ""
    state.parameters.type = ""
}
// 改变上线下线状态
const changeStatus = (row: IUpdateUserStatusParams) => {
    ElMessageBox.confirm(
        '确定要改变状态吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            user.homeAdvertiseUpdateStatus({ id: Number(row.id), status: row.status }).then(res => {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
            }).catch(err => {
                row.status = row.status == 1 ? 0 : 1
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
            row.status = row.status == 1 ? 0 : 1
        })

}
// 删除
// 封装
const getdelFn = () => {
    ElMessageBox.confirm(
        '确定要修改吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        user.homeAdvertiseDelete(state.ids).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
                gethomeAdvertiseList()
            }
        })
    }).catch(() => {
        ElMessage({
            message: "修改失败",
            type: "info",
        });
    })



}
const delFn = (id: number) => {
    state.ids.ids = []
    state.ids.ids.push(id)
    getdelFn()

}

const sureDelFn = () => {
    if (state.del == 2) {
        getdelFn()
    }
}


</script>
<style lang="less" scoped>
.box {
    border: 1px solid #c0c4d1;
    padding: 20px;
    color: black;

    .search {
        display: flex;
        justify-content: space-between;


    }

    .input {
        margin-top: 20px;
        // width: 350px;
        display: flex;
    }
}

.record {
    border: 1px solid #c0c4d1;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: black;
}

.footer {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;

    .footer-srue {
        display: flex;
    }
}
</style>